import React from 'react';
import AppleItem from './AppleItem';
import '../styles/appleBasket.scss';
import { inject, observer } from 'mobx-react';

@inject('appleStore')
@observer
class AppleBusket extends React.Component {
  getApples() {
    const {appleList, eatApple} = this.props.appleStore
    const data = []

    if(!appleList.filter(apple => apple.isEaten === false).length) {
      data.push(<div className="empty-tip" key="empty">没有苹果</div>)
      return data
    }

    appleList.forEach(apple => {
      if(!apple.isEaten) {
        data.push(<AppleItem apple={apple} eatApple={eatApple} key={apple.id}/>)
      }
    })
    return data

  }
  render() {
    const {appleList, addApple, status, isAddingButton} = this.props.appleStore
    return (
      <div className="appleBusket">
        <div>

        </div>
        <div className="title">苹果篮子</div>

        <div className="stats">
          <div className="section">
            <div className="head">当前</div>
            <div className="content">{status.appleAll.num}个苹果，{status.appleAll.totalWeight}克
                    </div>
          </div>
          <div className="section">
            <div className="head">已吃掉</div>
            <div className="content">{status.appleEaten.num}个苹果，{status.appleEaten.totalWeight}</div>
          </div>
        </div>

        <div className="appleList">
          {
             this.getApples()
          }    
        </div>

        <div className="btn-div">
          <button className={isAddingButton? 'disabled':''} onClick={()=>addApple()}>{isAddingButton? '正在摘苹果':'摘苹果'}</button>
        </div>
      </div>
    );
  }
}

export default AppleBusket;
